<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>爱好选择器</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
     span{
	    color:red;
		margin-right:10px;
	 }
  </style>
 </head>
 <body>
    <form>
	   <h2>你爱好的运动是：</h2>
	   <input type="checkbox" name="items" value="足球">足球
	   <input type="checkbox" name="items" value="篮球">篮球
	   <input type="checkbox" name="items" value="羽毛球">羽毛球
	   <input type="checkbox" name="items" value="乒乓球">乒乓球
	   <br>
	   <input type="button" id="checkedAll" value="全选">
	   <input type="button" id="checkedNotAll" value="全不选">
	   <input type="button" id="checkedRev" value="反选">
	   <input type="button" id="send" value="提交">
	</form>
	<div></div>
 </body>
 <script>
   $checkBox = $(":checkbox[name=items]");
   $("#checkedAll").click(function(){
      $checkBox.prop("checked",true);
   });

   $("#checkedNotAll").click(function(){
      $checkBox.prop("checked",false);
   });

   $("#checkedRev").click(function(){
      $checkBox.each(function(){
	     this.checked = !this.checked;
	  });
   });

   $("#send").click(function(){
	  $("div").text("");
      $checkBox.each(function(){
	      if(this.checked == true){
		     $("div").append("<span>"+$(this).val()+"</span>");
		  }
	  });
   });
 </script>
</html>
